<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="orange"
      inactive-color="#000"
      @change="onChange"
    >
      <van-tabbar-item>
        <van-icon
          class="iconfont icon-shouye"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon
          class="iconfont icon-gouwuche2"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>购物车</span> </van-tabbar-item
      ><van-tabbar-item>
        <van-icon
          class="iconfont icon-dingdanliebiao"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>订单列表</span> </van-tabbar-item
      ><van-tabbar-item>
        <van-icon class="iconfont icon-my" slot="icon" size="1.3rem"></van-icon>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";
Vue.use(Icon);
Vue.use(Tabbar);
Vue.use(TabbarItem);

import "@/assets/font/iconfont.css";

export default {
  data() {
    return {
      active: 0,
      url: [
        "/index",
        "/cart",
        "/olist",
          "/center" ||
          "/login" ||
          "/tologin" ||
          "/install" ||
          "/map" ||
          "/coupon" ||
          "/ContactCard" ||
          "/no",
      ],
    };
  },
  methods: {
    onChange(index) {
      this.$router.push(this.url[index]);
    },
  },
  created() {
    var path = this.$route.path;
    this.active = this.url.indexOf(path);
    console.log(this.active);
  },
};
</script>
<style scoped>
</style>
